/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<div class="openatc-planchart">
  <div class="planchart-top" v-show="false">
    <div class="coordination-name">{{$t('openatc.greenwaveoptimize.coordinationstrategy')}}</div>
    <div class="coordination-select">
      <el-select v-model="optstrategy" :placeholder="$t('openatc.common.placeholder')" size="small">
        <el-option
          v-for="item in optstrategyOptions"
          :key="item.value"
          :label="$t('openatc.greenwaveoptimize.optstrategyoption' + item.id)"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="coordination-name" style="margin-left: 20PX;">{{$t('openatc.greenwaveoptimize.coordinationdirection')}}</div>
    <div class="coordination-select">
      <el-select v-model="direction" :placeholder="$t('openatc.common.placeholder')" size="small" @change="handleDirection">
        <el-option
          v-for="item in directionOptions"
          :key="item.value"
          :label="$t('openatc.greenwaveoptimize.directionOption' + item.id)"
          :disabled="(optstrategy != 'green' && optstrategy != 'dynamicGreen') && item.value === 'all'"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="coordination-name" style="margin-left: 20PX;">{{$t('openatc.greenwaveoptimize.keyintersection')}}</div>
    <div class="coordination-select">
      <el-select v-model="keyintsid" :placeholder="$t('openatc.common.placeholder')" size="small">
        <el-option
          v-for="item in keyintsidOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="coordination-name" style="margin-left: 20PX;">{{$t('openatc.greenwaveoptimize.upspeed')}}</div>
    <div class="coordination-select">
      <el-input v-model="upspeed" size="small" @change="handleUpSpeed"></el-input>
    </div>
    <div class="coordination-name" style="margin-left: 20PX;">{{$t('openatc.greenwaveoptimize.downspeed')}}</div>
    <div class="coordination-select">
      <el-input v-model="downspeed" size="small" @change="handleDownSpeed"></el-input>
    </div>
  </div>

  <div class="planchart-bottom" style="width: 100%;height: 100%;">
    <div class="realtimescheme" v-show="isShowRealtimeChart">
      <div class="chart-title" v-show="isShowTitle">
        <div class="title">
          {{$t('openatc.greenwaveoptimize.realtimecoordinationscheme')}}
        </div>
        <div class="direction-up" v-if="greenWaveParam.realtimeGreenWave && greenWaveParam.realtimeGreenWave.up">
          <div class="item" @click="onRealtimeLineUpClick">
            <div class="label">
              <div :class="isShowRealtimeUp ? 'line-up' : 'line-up-selected'"></div>
            </div>
            <div class="value">{{$t('openatc.greenwaveoptimize.directionOptionup')}}</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.waveWidth')}}:</div>
            <div class="value">{{greenWaveParam.realtimeGreenWave.up.width}}s</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.distance')}}:</div>
            <div class="value">{{greenWaveParam.realtimeGreenWave.up.distance}}m</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.speed1')}}:</div>
            <div class="value">{{greenWaveParam.realtimeGreenWave.up.speed}}km/h</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.vehicle1')}}:</div>
            <div class="value">{{greenWaveParam.realtimeGreenWave.up.vehicle}}</div>
          </div>
        </div>
        <div class="direction-down" v-if="greenWaveParam.realtimeGreenWave && greenWaveParam.realtimeGreenWave.down">
          <div class="item" @click="onRealtimeLineDownClick">
            <div class="label">
              <div :class="isShowRealtimeDown ? 'line-down' : 'line-down-selected'"></div>
            </div>
            <div class="value">{{$t('openatc.greenwaveoptimize.directionOptiondown')}}</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.waveWidth')}}:</div>
            <div class="value">{{greenWaveParam.realtimeGreenWave.down.width}}s</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.distance')}}:</div>
            <div class="value">{{greenWaveParam.realtimeGreenWave.down.distance}}m</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.speed1')}}:</div>
            <div class="value">{{greenWaveParam.realtimeGreenWave.down.speed}}km/h</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.vehicle1')}}:</div>
            <div class="value">{{greenWaveParam.realtimeGreenWave.down.vehicle}}</div>
          </div>
        </div>
        <div class="switch-offset">
          <span class="label">{{$t('openatc.greenwaveoptimize.pattern')}}/{{$t('openatc.greenwaveoptimize.realtime')}}:</span>
          <el-switch
            style="padding-left: 5px;"
            v-model="isSwitchRealOffset"
            @change="onSwitchRealOffsetChange"
            active-color="#299BCC">
          </el-switch>
        </div>
      </div>
      <div id="realtimechart" class="echartsStyle" style="width:100%;"></div>
    </div>
    <div class="bar" v-show="isShowTitle"></div>
    <div class="planningscheme" v-show="isShowPlanChart">
      <div class="chart-title" v-show="isShowTitle">
        <div class="title">
          {{$t('openatc.greenwaveoptimize.planningcoordinationscheme')}}
        </div>
        <div class="direction-up" v-if="greenWaveParam.greenWave && greenWaveParam.greenWave.up">
          <div class="item" @click="onLineUpClick">
            <div class="label">
              <div :class="isShowUp ? 'line-up' : 'line-up-selected'"></div>
            </div>
            <div class="value">{{$t('openatc.greenwaveoptimize.directionOptionup')}}</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.waveWidth')}}:</div>
            <div class="value">{{greenWaveParam.greenWave.up.width}}s</div>
            <div :class="getArrowClass('up', 'width')">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.distance')}}:</div>
            <div class="value">{{greenWaveParam.greenWave.up.distance}}m</div>
            <div :class="getArrowClass('up', 'distance')">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.speed1')}}:</div>
            <div class="value">{{greenWaveParam.greenWave.up.speed}}km/h</div>
            <div :class="getArrowClass('up', 'speed')">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.vehicle1')}}:</div>
            <div class="value">{{greenWaveParam.greenWave.up.vehicle}}</div>
            <div :class="getArrowClass('up', 'vehicle')">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
        </div>
        <div class="direction-down" v-if="greenWaveParam.greenWave && greenWaveParam.greenWave.down">
          <div class="item" @click="onLineDownClick">
            <div class="label">
              <div :class="isShowDown ? 'line-down' : 'line-down-selected'"></div>
            </div>
            <div class="value">{{$t('openatc.greenwaveoptimize.directionOptiondown')}}</div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.waveWidth')}}:</div>
            <div class="value">{{greenWaveParam.greenWave.down.width}}s</div>
            <div :class="getArrowClass('down', 'width')">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.distance')}}:</div>
            <div class="value">{{greenWaveParam.greenWave.down.distance}}m</div>
            <div :class="getArrowClass('down', 'distance')">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.speed1')}}:</div>
            <div class="value">{{greenWaveParam.greenWave.down.speed}}km/h</div>
            <div :class="getArrowClass('down', 'speed')">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
          <div class="item">
            <div class="label">{{$t('openatc.greenwaveoptimize.vehicle1')}}:</div>
            <div class="value">{{greenWaveParam.greenWave.down.vehicle}}</div>
            <div :class="getArrowClass('down', 'vehicle')">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
        </div>
      </div>
      <div id="planningchart" class="echartsStyle" style="width:100%;height: 100%;min-height: 330PX;"></div>
    </div>
  </div>
</div>
</template>

<script>
import CDTModel from '../../../compose/components/planChart/coordinationModel.js'
import { getBandwidth, getRealtimeOffset } from '../../../../api/route.js'
import { getMessageByCode } from '../../../../utils/responseMessage'
import PlanContent from '../../planContent.vue'
import RouteUtil from '../../routeUtil.js'
export default {
  name: 'routeChart',
  components: {PlanContent},
  props: {
    isShowPlanChart: {
      type: Boolean,
      default: true
    },
    isShowRealtimeChart: {
      type: Boolean,
      default: true
    },
    isShowTitle: {
      type: Boolean,
      default: true
    },
    greenWaveParam: {
      type: Object,
      default: () => {}
    },
    routeId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      chartParamsBak: {},
      greenWaveParamBak: {},
      chartParams: {
        plan: {},
        realtime: {}
      },
      isSwitchRealOffset: false,
      direction: 'all',
      isShowUp: true,
      isShowDown: true,
      directionRealtime: 'all',
      isShowRealtimeUp: true,
      isShowRealtimeDown: true,
      optstrategy: 'green',
      keyintsid: '',
      greenWaveWidth: '',
      upspeed: 0,
      downspeed: 0,
      keyintsidOptions: [],
      directionOptions: [{
        value: 'up',
        label: this.$t('openatc.greenwaveoptimize.directionOption1'),
        id: '1'
      }, {
        value: 'down',
        label: this.$t('openatc.greenwaveoptimize.directionOption2'),
        id: '2'
      }, {
        value: 'all',
        label: this.$t('openatc.greenwaveoptimize.directionOption3'),
        id: '3'
      }],
      optstrategyOptions: [{
        value: 'green',
        label: this.$t('openatc.greenwaveoptimize.optstrategyoption1'),
        id: '1'
      }, {
        value: 'red',
        label: this.$t('openatc.greenwaveoptimize.optstrategyoption2'),
        id: '2'
      }, {
        value: 'motorcade-end',
        label: this.$t('openatc.greenwaveoptimize.optstrategyoption3'),
        id: '3'
      }, {
        value: 'dynamicGreen',
        label: this.$t('openatc.greenwaveoptimize.optstrategyoption4'),
        id: '4'
      }],
      routerData: {},
      isShowUpCard: false,
      isShowDownCard: false,
      green: [],
      cardStyle: {
        'float': 'left'
      },
      directionName: ''
    }
  },
  watch: {
    optstrategy (val) {
      if (val !== 'green') {
        this.direction = 'up'
      }
      this.handleDirection(this.direction)
    }
  },
  mounted () {
    var dom = document.getElementById('planningchart')
    this.planningchart = this.$echarts.init(dom)
    var dom2 = document.getElementById('realtimechart')
    this.realtimechart = this.$echarts.init(dom2)
    const _this = this
    window.onresize = function () {
      _this.planningchart.resize()
      _this.realtimechart.resize()
    }
    // window.addEventListener('resize', function () {
    //   this.planningchart.resize()
    // })
  },
  created () {
  },
  methods: {
    async onSwitchRealOffsetChange (val) {
      console.log(val)
      if (val) {
        this.chartParamsBak = JSON.parse(JSON.stringify(this.chartParams))
        let devs = this.chartParams.realtime.routeData.devs
        let routeid = this.routeId
        let keyagentid = this.chartParams.realtime.routeData.keyintsid
        if (!keyagentid) {
          keyagentid = this.chartParams.realtime.routeData.devs[0].agentid
        }
        let keyDev = this.chartParams.realtime.routeData.devs.find(item => item.agentid === keyagentid)
        let keyoffset = 0
        let realtimePatternList = JSON.parse(JSON.stringify(this.chartParams.realtime.patternList))
        let paramsFeatureObj = realtimePatternList.find(item => item.agentid === keyagentid)
        if (paramsFeatureObj) {
          let paramsPatternList = paramsFeatureObj.feature.patternList
          let paramsDevPattern = paramsPatternList.find(item => item.id === keyDev.patternid)
          if (paramsDevPattern) {
            keyoffset = paramsDevPattern.offset
          }
        }
        let realtimeOffsetList = await this.getRealtimeOffset(routeid, keyagentid, keyoffset)
        for (let dev of devs) {
          let findDev = realtimeOffsetList.find(item => item.agentid === dev.agentid)
          if (findDev) {
            dev.offset = findDev.offset
            // let featureDev = dev.feature.patternList.find(item => item.id === dev.patternid)
            // if (featureDev) {
            //   featureDev.offset = findDev.offset
            // }
            let patternDev = dev.patternList.find(item => item.id === dev.patternid)
            if (patternDev) {
              patternDev.offset = findDev.offset
            }
            let featureObj = realtimePatternList.find(item => item.agentid === dev.agentid)
            if (featureObj) {
             let patternList = featureObj.feature.patternList
             let devPattern = patternList.find(item => item.id === dev.patternid)
             if (devPattern) {
               devPattern.offset = findDev.offset
             }
            }
          }
        }
        // let realtimeGreenWave = await this.getBandwidth(this.chartParams.realtime.routeData)
        // console.log(realtimeGreenWave)
        // let planGreenWave = await this.getBandwidth(this.chartParams.plan.routeData)
        // console.log(planGreenWave)
        // let greenWaveParams = await this.getGreenWaveParam(planGreenWave, realtimeGreenWave)
        // console.log(greenWaveParams)
        // this.greenWaveParamBak = JSON.parse(JSON.stringify(this.greenWaveParam))
        // this.greenWaveParam = greenWaveParams
        this.onRealtimeChart(this.chartParams.realtime.routeData, realtimePatternList, this.chartParams.realtime.greenwave, this.chartParams.realtime.devicesData)
      } else {
        // this.greenWaveParam = this.greenWaveParamBak
        this.onRealtimeChart(this.chartParamsBak.realtime.routeData, this.chartParamsBak.realtime.patternList, this.chartParamsBak.realtime.greenwave, this.chartParamsBak.realtime.devicesData)
      }
    },
    async getGreenWaveParam (greenWave, realtimeGreenWave) {
      let res = {}
      if (greenWave && realtimeGreenWave) {
        let up = greenWave.find(item => item.type === 'up')
        let down = greenWave.find(item => item.type === 'down')
        let realtimeUp = realtimeGreenWave.find(item => item.type === 'up')
        let realtimeDown = realtimeGreenWave.find(item => item.type === 'down')
        res = {
          greenWave: {
            up: up,
            down: down
          },
          realtimeGreenWave: {
            up: realtimeUp,
            down: realtimeDown
          }
        }
      }
      return res
    },
    async getBandwidth (routeData) {
      let bizType = 1
      let routeUtilObj = new RouteUtil(this.routeId, routeData, this.chartParams.realtime.patternList)
      let param = routeUtilObj.getGenerateParam(routeData, bizType)
      // let param = this.getGenerateParam(routeData, 1)
      let greenwave = []
      // @ts-ignore
      await getBandwidth(param).then(res => {
        if (!res.data.success) {
          let msg = getMessageByCode(res.data.code, this.$i18n.locale)
          if (res.data.data) {
            let errorCode = res.data.data.errorCode
            if (errorCode) {
              msg = msg + ' - ' + getMessageByCode(errorCode, this.$i18n.locale)
            }
          }
          this.$message.error(msg)
          return
        }
        greenwave = res.data.data.greenwave
      })
      return greenwave
    },
    async getRealtimeOffset (routeid, keyagentid, keyoffset) {
      let list = []
      // @ts-ignore
      await getRealtimeOffset(routeid, keyagentid, keyoffset).then(res => {
        if (!res.data.success) {
          let msg = getMessageByCode(res.data.code, this.$i18n.locale)
          if (res.data.data) {
            let errorCode = res.data.data.errorCode
            if (errorCode) {
              msg = msg + ' - ' + getMessageByCode(errorCode, this.$i18n.locale)
            }
          }
          this.$message.error(msg)
          return
        }
        list = res.data.data
      })
      return list
    },
    getArrowClass (direction, column) {
      let res = 'number-none'
      if (this.greenWaveParam && this.greenWaveParam.greenWave && this.greenWaveParam.realtimeGreenWave) {
        let value = this.greenWaveParam.greenWave[direction][column]
        let realtimeValue = this.greenWaveParam.realtimeGreenWave[direction][column]
        if (value > realtimeValue) {
          res = 'number-up'
        } else if (value < realtimeValue) {
          res = 'number-down'
        }
      }
      return res
    },
    onPlanChart (routeData, patternList, greenwave, devicesData) {
      this.chartParams.plan.routeData = routeData
      this.chartParams.plan.patternList = patternList
      this.chartParams.plan.greenwave = greenwave
      this.chartParams.plan.devicesData = devicesData
      // this.direction = 'all'
      // this.isShowUp = true
      // this.isShowDown = true
      // routeData.direction = this.direction
      this.greenWaveWidth = ''
      if (greenwave && greenwave.length > 0) {
        let widthList = greenwave.map(dev => {
          let dirStr = dev.type === 'up' ? '上行：' : '下行：'
          return dirStr + dev.width
        })
        this.greenWaveWidth = this.$t('openatc.dutyroute.greenWaveWidth') + ' ' + widthList.join(' , ')
      }
      this.CDTModel = new CDTModel()
      this.keyintsidOptions = []
      if (greenwave.length === 0) {
        this.isShowUpCard = false
        this.isShowDownCard = false
      } else {
        this.green = greenwave
        if (this.direction === 'up') {
          this.isShowUpCard = true
          this.directionName = '上行'
          // this.cardStyle.float = 'left'
        } else if (this.direction === 'down') {
          this.isShowDownCard = true
          this.directionName = '下行'
          // this.cardStyle.float = 'right'
        } else if (this.direction === 'all') {
          this.isShowUpCard = true
          this.isShowDownCard = true
          this.directionName = '双向'
          // this.cardStyle.float = 'right'
        }
        this.CDTModel.greenwave = greenwave
      }
      if (patternList.length === 0) {
        // this.$message.error('方案为空！')
        return
      }
      if (this.optstrategy !== 'green') {
        this.isShowUpCard = false
        this.isShowDownCard = false
      }
      this.optstrategy = routeData.optstrategy
      this.direction = routeData.direction
      this.keyintsid = routeData.keyintsid
      this.upspeed = routeData.upspeed
      this.downspeed = routeData.downspeed
      let devs = routeData.devs
      for (let inter of devs) {
        let obj = {}
        obj.label = inter.agentid
        obj.value = inter.agentid
        this.keyintsidOptions.push(obj)
        inter.patternList = []
        let id = inter.agentid
        let patternId = inter.patternid
        let pattern = patternList.filter(pat => pat.agentid === id)[0]
        if (pattern.feature !== undefined && pattern.feature.patternList.length !== 0) {
          let allPatternList = pattern.feature.patternList
          if (Array.isArray(allPatternList)) {
            let currPatternList = allPatternList.filter(apl => apl.id === patternId)
            inter.patternList = currPatternList
          } else {
            let tempList = []
            tempList.push(allPatternList)
            inter.patternList = tempList
          }
          // check controlPattern
          const pattern0 = allPatternList[0]
          if (pattern0.contrloType === 'stage' || !pattern0.rings || pattern0.rings.length === 0) {
            console.log('路口： ' + id + ' 阶段模式控制中', pattern)
            // return false
          }
        }
        // 查询设备离线状态
        let devinfo = devicesData.filter(dev => dev.agentid === inter.agentid)[0]
        inter.stateinfo = this.getDevState(devinfo)
      }
      this.CDTModel.rourte = routeData
      routeData.devs.map(dev => {
        let id = dev.patternList[0].id
        const pattern = dev.feature.patternList.find(p => p.id === id)
        if (pattern) {
          let targetPattern = {...dev.patternList[0], ...pattern}
          if (targetPattern.rings.length === 0 || targetPattern.contrloType === 'stage') {
            // reset route phaseid
            this.resetRoutePhaseId(dev, targetPattern)
            // stages to rings
            let stagesList = targetPattern.stagesList
            if (stagesList && stagesList.length > 0) {
              let tempRings = stagesList.map((item, index) => {
                let ringItem = {
                  id: index + 1,
                  value: item.stageSplit
                }
                return ringItem
              })
              targetPattern.rings = [tempRings]
            }
          }
          dev.patternList[0] = targetPattern
        }
      })
      console.log('plan routeData: ', routeData)
      this.routerData = routeData
      this.clearPlanningChart()
      let option = this.CDTModel.RenderOption()
      console.log('plan routeData option: ', option)
      this.planningchart.setOption(option)
    },
    resetRoutePhaseId (routeData, targetPattern) {
      let forwardphaseid = routeData.forwardphaseid
      let backphaseid = routeData.backphaseid
      let targetForwardphaseid = -1
      let targetBackphaseid = -1
      let stagesList = targetPattern.stagesList
      for (let i = 0; i < stagesList.length; i++) {
        let stageItem = stagesList[i]
        if (targetForwardphaseid < 0 && stageItem.phases.includes(forwardphaseid)) {
          targetForwardphaseid = i + 1
        }
        if (targetBackphaseid < 0 && stageItem.phases.includes(backphaseid)) {
          targetBackphaseid = i + 1
        }
        if (targetForwardphaseid > 0 && targetBackphaseid > 0) {
          break
        }
      }
      routeData.forwardphaseid = targetForwardphaseid
      routeData.backphaseid = targetBackphaseid
    },
    onRealtimeChart (routeData, patternList, greenwave, devicesData) {
      this.chartParams.realtime.routeData = routeData
      this.chartParams.realtime.patternList = patternList
      this.chartParams.realtime.greenwave = greenwave
      this.chartParams.realtime.devicesData = devicesData
      // this.directionRealtime = 'all'
      // this.isShowRealtimeUp = true
      // this.isShowRealtimeDown = true
      // routeData.direction = this.directionRealtime
      this.CDTModel2 = new CDTModel()
      this.keyintsidOptions = []
      if (greenwave.length !== 0) {
        this.CDTModel2.greenwave = greenwave
      }
      if (patternList.length === 0) {
        return
      }
      let devs = routeData.devs
      for (let inter of devs) {
        let obj = {}
        obj.label = inter.agentid
        obj.value = inter.agentid
        this.keyintsidOptions.push(obj)
        inter.patternList = []
        let id = inter.agentid
        let patternId = inter.patternid
        let pattern = patternList.filter(pat => pat.agentid === id)[0]
        if (pattern.feature !== undefined && pattern.feature.patternList.length !== 0) {
          let allPatternList = pattern.feature.patternList
          if (Array.isArray(allPatternList)) {
            let currPatternList = allPatternList.filter(apl => apl.id === patternId)
            inter.patternList = currPatternList
          } else {
            let tempList = []
            tempList.push(allPatternList)
            inter.patternList = tempList
          }
        }
        inter.feature.patternList = inter.patternList
        // 查询设备离线状态
        let devinfo = devicesData.filter(dev => dev.agentid === inter.agentid)[0]
        inter.stateinfo = this.getDevState(devinfo)
      }
      routeData.devs.map(dev => {
        let id = dev.patternid
        const pattern = dev.feature.patternList.find(p => p.id === id)
        if (pattern) {
          let targetPattern = {...dev.patternList[0], ...pattern}
          if (targetPattern.rings.length === 0 || targetPattern.contrloType === 'stage') {
            // reset route phaseid
            this.resetRoutePhaseId(dev, targetPattern)
            // stages to rings
            let stagesList = targetPattern.stagesList
            if (stagesList && stagesList.length > 0) {
              let tempRings = stagesList.map((item, index) => {
                let ringItem = {
                  id: index + 1,
                  value: item.stageSplit
                }
                return ringItem
              })
              targetPattern.rings = [tempRings]
            }
          }
          dev.patternList[0] = targetPattern
        }
      })
      console.log('realtime routeData: ', routeData)
      this.CDTModel2.rourte = routeData
      this.clearRealtimeChart()
      let option = this.CDTModel2.RenderOption(false)
      // console.log('realtime routeData option: ', option)
      this.realtimechart.setOption(option)
    },
    onLineUpClick () {
      this.isShowUp = !this.isShowUp
      let direction = this.getDirection(this.isShowUp, this.isShowDown)
      this.direction = direction
      this.showResetChart()
    },
    onLineDownClick () {
      this.isShowDown = !this.isShowDown
      let direction = this.getDirection(this.isShowUp, this.isShowDown)
      this.direction = direction
      this.showResetChart()
    },
    onRealtimeLineUpClick () {
      this.isShowRealtimeUp = !this.isShowRealtimeUp
      let direction = this.getDirection(this.isShowRealtimeUp, this.isShowRealtimeDown)
      this.directionRealtime = direction
      this.showResetChart()
    },
    onRealtimeLineDownClick () {
      this.isShowRealtimeDown = !this.isShowRealtimeDown
      let direction = this.getDirection(this.isShowRealtimeUp, this.isShowRealtimeDown)
      this.directionRealtime = direction
      this.showResetChart()
    },
    showResetChart () {
      this.$emit('showResetChart', this.direction, this.directionRealtime)
    },
    getDirection (isShowUp, isShowDown) {
      let direction = 'all'
      if (isShowUp && isShowDown) {
        direction = 'all'
      } else if (!isShowUp && !isShowDown) {
        direction = ''
      } else if (isShowUp) {
        direction = 'up'
      } else if (isShowDown) {
        direction = 'down'
      }
      return direction
    },
    clearPlanningChart () {
      if (this.planningchart.getOption() !== undefined) {
        this.planningchart.clear()
      }
    },
    clearRealtimeChart () {
      if (this.realtimechart.getOption() !== undefined) {
        this.realtimechart.clear()
      }
    },
    handleUpSpeed (val) {
      this.routerData.upspeed = Number(val)
      this.CDTModel.rourte = this.routerData
      this.planningchart.clear()
      this.planningchart.setOption(this.CDTModel.RenderOption())
    },
    handleDownSpeed (val) {
      this.routerData.downspeed = Number(val)
      this.CDTModel.rourte = this.routerData
      this.planningchart.clear()
      this.planningchart.setOption(this.CDTModel.RenderOption())
    },
    handleDirection (val) {
      this.routerData.direction = val
      this.CDTModel.rourte = this.routerData
      this.CDTModel.greenwave = []
      this.isShowUpCard = false
      this.isShowDownCard = false
      this.planningchart.clear()
      this.planningchart.setOption(this.CDTModel.RenderOption())
    },
    getDevState (dev) {
      if (dev.state === 'DOWN') {
        return this.$t('openatc.devicemanager.offline')
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
<style rel="stylesheet/scss" lang="scss">
  .up-card .el-card__header {
    padding: 10px 20px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .up-card .el-card__body {
    padding: 10px;
  }
</style>
